/** @jsxImportSource @emotion/react */
//import { jsx } from "@emotion/react";
import * as React from "react";
import {
    InputGroup,
    Input,
    useTheme,
    VisuallyHidden,
    Button,
    useResponsiveContainerPadding,
    IconSearch,
    IconLayers,
    IconButton,
    Dialog,
    InputLine,
    Select,
    CommitInput,
    ButtonRefComp,
    DialogContent, DialogHeading, DialogDescription, DialogClose
} from "customize-easy-ui-component";
// import {DialogClose, DialogContent, DialogDescription, DialogHeading} from "@/comp/Dialog";
import { DevfilterContext } from "../context/DevfilterContext";
import {useContext, useRef} from "react";
import RoutingContext from "../routing/RoutingContext";
import {ChooseUnit} from "../unit/ChooseUnit";
import UserContext from "../routing/UserContext";


export interface SearchBoxProps {
  setQuery: React.Dispatch<React.SetStateAction<any>>;
  query: any;       //简易搜索输入框部分。
  label?: string;
    autoFocus?: boolean;
   //跨越非直系关系组件的参数的传递和更新查询。
   //【方案】从路由页面的入口参数入手，修改页面入口定义查询参数，按钮直接修改参数立刻刷新路由。
  //另外一种途径：把{data, refetch} = usePaginationFragment()从兄弟组件上移动到共同父辈组件，然后再用props传递形式把data,refetch等参数下传和共享给两个组件都能用得到！
}
//query,setQuery是搜索输入框的；不是弹出参数对话框； 但是里面隐藏一个编辑器是对话框的。
//设备列表的 过滤组件配置模块； ？过滤参数改装成路由的参数在路由组件就注入过滤参数。这里用Link点击转移URI;
/**旧的平台有统计数功能所以过滤参数更多的； 分析统计流处理批作业剥离出去。
 * 所以：设备种类type sort vart subv 这样的就不搞过滤器了，需求不适合本系统，监察平台或者分析系统{批处理作业}才会需要这样的过滤。本平台不涉及！
 * 类似理由舍弃如下过滤参数：svu责任监察 model设备型号；
 * 若上VillageChoose组件:须先选'街道乡镇'输入'%partial%'找，第二步才是按照Village.id匹配;还是一步直接vlg{name全文}来个全文搜索,不考虑两步走的太啰嗦。
【考虑】EqpES索引有ad嵌套对象但是没有town.name之类的；只有ad自己id+5级区划的id一共6个ID,所以无法直接上来个地理区域名字来搜索Eqp的！本系统设备列表页面真有地域搜寻需求吗？
 按地域来缩小范围然后录轮询整个区域的全部设备吗？ 归属于批作业或统计目的，？还是仅仅找寻某个设备辅助目的（实际使用可能性多大）;还是决定扔掉此类可能要求，让其他系统去抗这类需求。
 【结论】总之：旧平台那样导数据给Excel和统计个数的功能不应该和我这设备列表勉强扯在一起！那些应该归属于后台任务线下的流处理或批量作业以及统计分析系统的事情。不能混杂需求。
 * */
export const SearchDeviceBox: React.FunctionComponent<SearchBoxProps> = ({
  query,
  label = "搜索吧",
  setQuery,
  autoFocus,
   ...other
}) => {
    //第一次啊运行吗？
    const mountedRef = useRef(false);
    if(!mountedRef.current) {
        mountedRef.current = true;
        console.log("加载初始化SearchDeviceBox期间0: mount=",mountedRef.current);
    }
    else
        console.log("加载初始化SearchDeviceBox期间1: mount=", mountedRef.current);
  const theme = useTheme();
  const responsiveContainerPadding = useResponsiveContainerPadding();
    const {user} = useContext(UserContext);
    //【确保】设备路由主页面可以充当做伪对话框，从其它编辑器选择页面跳入本路由主页面挑选过滤设备，最后还要转回跳来的页面URL同时确保恢复该页面状态数据：编辑器已修改数据。
    //【伪对话框】模式，通常是特殊页面的，不支持嵌套地跳转伪对话框，也不能随意在SPA APP路由中走动，只能局部经过设计确保的URL页面漫游小圈子之内，否则会丢失返回刚刚正在编辑器的能力。
    //伪对话框模式目标主页面实际很少的；但是会利用到这个伪对话页面的那些编辑器的页面就非常多了，好多页面会挑选台账的：reurl=跳转回去编辑器页面。 底层History支持。
    const {save, field, reurl, p1field, multi}= window.history.state?.state??{};      //通用伪对话框传递格式field=上次跳转目标选择字段。
    console.log("可能从伪对话框回来的？state?.state=", window.history.state?.state);
    //从伪对话框回来的？需要立刻弹出过滤对话框并恢复刚才输入的数据。【局限性】伪对话框若太复杂可能逻辑不完备，几种可能性表达会冲突了？简单用还可以的。"meqp"假定设备单选的都是它。
    const [open, setOpen] = React.useState((save?.open && field!=="meqp") || false);
    //利用外部DevfilterContext 传入的unit_id; 在/unit/目录的组件：该单位正在使用设备来充当对话框替代功能时刻设置的unit_id。
    const filt= JSON.parse(sessionStorage['设备过滤']??'{}');
  //const [editor, setEditor] = React.useState<any>({...filt});
    const [useu, setUseu] = React.useState(save?.useu || filt?.useu);
    const [useuName, setUseuName] = React.useState(save?.useuName || filt?.useuName);
    //利用sessionStorage来和路由器查询参数以及过滤器参数保持一致性的；
    const [depId, setDepId] = React.useState<any>( save?.depId || filt?.ispud?.id );
    const [ispu, setIspu] = React.useState(save?.ispu || filt?.ispu);
    const [oid, setOid] = React.useState<any>(save?.oid || filt?.oid);
    const [fno, setFno] = React.useState<any>(save?.fno ||filt?.fno);
    const [address, setAddress] = React.useState(save?.address || filt?.address);
    const [plno, setPlno] = React.useState(save?.plno || filt?.plno);
    const [cert, setCert] = React.useState(save?.cert || filt?.cert);
    const [sno, setSno] = React.useState(save?.sno || filt?.sno);
    const [rcod, setRcod] = React.useState(save?.rcod || filt?.rcod);
    const [plat, setPlat] = React.useState(save?.plat || filt?.plat);
    const [vlgName, setVlgName] = React.useState(save?.vlgName || filt?.vlgName);

    console.log("来看SearchDeviceBox当前的 filt=",filt,"query=",query);
    const {history } = useContext(RoutingContext);
  //过滤器对话框，又要弹出单位搜索与列表页面对话框(搜索设备列表+单个设备明明细关联+更多关联属性或组件嵌套)；2多层对话框啊！！
    //todo:变换形式的？过滤器简易显示组件:立刻显示和交互 当前的过滤器几个选择项目甚至输入，不需要弹出式的对话框？一体，立刻能联动响应。
    //过滤OR关系的： 列表增加, in[ A||B ]，URI参数也得传递进来啊,URL长度限制8182字符,约200个字段ID;
    async function pseudoDiasave() {
        return { open,oid,useu,useuName,ispu,depId,cert,sno,rcod,fno,plat,vlgName,address,plno };
    }
    //过滤器对话框编辑保存用到的
    const commitBlurRef =React.useRef(null);

     /*利用<form   <Input type='reset' value={'重置'}/>   等同于使用  <input type="reset" value="重置"/>
        这个reset对于有些编辑输入无法起到清理用处的?   而按钮type="submit"必须在<form里面才会执行form的设置;
        【鸡肋】必须是<CommitInput 并且有defaultValue={""}的:这时reset才能有效果。
     * */

  return (
    <React.Fragment>
    <form
      css={{
        margin: 0,
        position: "relative"
      }}
      onSubmit={e => e.preventDefault()}
    >
      <InputGroup
        css={{ margin: 0, marginRight: '3rem', position: "relative" }}
        hideLabel
        label={label}
      >
        <CommitInput  value={ query || ''}  onSave={txt => setQuery( txt || undefined) }
              type="search" inputSize="md"  autoComplete="off"  placeholder={label}
              css={[
                  {
                      height: "60px",
                      textAlign: "left",
                      border: "none",
                      borderBottom: "1px solid",
                      borderColor: theme.colors.border.default,
                      borderRadius: 0,
                      WebkitAppearance: "none",
                      // background: "transparent",
                      boxShadow: "none",
                      ":focus": {
                          boxShadow: "none",
                          backgroundColor: theme.colors.background.tint1
                      }
                  },
                  responsiveContainerPadding
              ]}
            {...other}
        />
      </InputGroup>
      <VisuallyHidden>
        <Button type="submit">搜索</Button>
      </VisuallyHidden>
      <IconSearch
        aria-hidden
        color={theme.colors.scales.gray[6]}
        css={{
          display: query ? "none" : "block",
          position: "absolute",
          right: `calc(2 * ${theme.spaces.lg})`,
          top: "50%",
          transform: "translateY(-50%)",
          zIndex: 10
        }}
      />
      <IconButton
        onClick={() => setOpen(true)}
        variant="ghost"
        label="定制可选参数"
        size="lg"
        icon={<IconLayers />}
        css={{
          display: query ? "none" : "block",
          position: "absolute",
          right: theme.spaces.sm,
          top: "50%",
          transform: "translateY(-50%)",
          zIndex: 10,
          height: 'unset',
          width: 'unset'
        }}
      />
    </form>
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent >
                <DialogHeading>
                    过滤器参数选择
                </DialogHeading>
                <DialogDescription>
        <div css={{ padding: '0 1rem' }}>
            <form  method="get"  action="/"  css={{margin: 0, position: "relative" }}>
          <div>
                <InputLine label={`监察识别码:`}>
                    <CommitInput type="search" placeholder="模糊搜索，最少3个字符"
                             value={oid || ''}   onSave={txt => setOid(txt||undefined) }
                    />
                </InputLine>
              <InputLine label={`使用单位(直接搜):`}>
                  <CommitInput type="search" placeholder="模糊搜索，有同名字的"
                                value={useuName || ''}  onSave={txt => setUseuName(txt||undefined) }
                  />
              </InputLine>
                <InputLine label={`使用单位(进入挑选):`}>
                  <ChooseUnit id={useu?.id} name={useu?.name} field={'useu'}
                              autoFocus={field==='useu'}  onCancel={() => { setUseu(undefined) }}
                              onDialog={async () => { return await pseudoDiasave() } }
                  />
                </InputLine>
                <InputLine label={`法定检验机构:`}>
                    <ChooseUnit id={ispu?.id} name={ispu?.name} field={'ispu'}
                              autoFocus={field==='ispu'} onCancel={() => { setIspu(undefined) }}
                              onDialog={async () => { return await pseudoDiasave() } }
                    />
                </InputLine>
              <InputLine label='归属检验部门'>
                <div>
                  <Select value={ depId || ''}  onChange={e =>{ setDepId( e.currentTarget.value||undefined ); }}>
                      <option></option>
                      { user.unit?.dvs.map((depm: any,i: number) => (
                          <option key={i} value={depm.id}>{depm.name}</option>
                      )) }
                  </Select>
                  <Button onPress={e => {setDepId(user?.dep?.id); }}>本部门</Button>
                </div>
              </InputLine>

              <InputLine label={`使用证号:`}>
                  <CommitInput type="search" placeholder="严格匹配查询"
                                value={cert || ''}  onSave={txt => setCert(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`设备国家代码:`}>
                  <CommitInput  type="search" placeholder="严格匹配"
                                value={sno || ''}  onSave={txt => setSno(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`注册代码:`}>
                  <CommitInput type="search"  placeholder="严格匹配"
                                value={rcod || ''}  onSave={txt => setRcod(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`出厂编号:`}>
                  <CommitInput  type="search" placeholder="精确查询"
                                value={fno || ''}  onSave={txt => setFno(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`牌照号:`}>
                  <CommitInput  type="search" placeholder="严格匹配"
                                value={plat || ''}  onSave={txt => setPlat(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`楼盘小区:`}>
                  <CommitInput type="search" placeholder="模糊搜索"
                                value={vlgName || ''}  onSave={txt => setVlgName(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`定位地址:`}>
                  <CommitInput type="search" placeholder="搜索,可模糊"
                                value={address || ''}  onSave={txt => setAddress(txt||undefined) }
                  />
              </InputLine>
              <InputLine label={`单位内部编号:`}>
                  <CommitInput type="search" placeholder="模糊搜索"
                                value={plno || ''}  onSave={txt => setPlno(txt||undefined) }
                  />
              </InputLine>

            <div
                css={{
                    display: "flex",
                    marginTop: theme.spaces.lg,
                    justifyContent: "flex-end"
                }}
            >
                <Input  type='reset'  value={'清空过滤'}
                       style={{margin: 'auto', width: undefined }}  css={{backgroundColor: 'wheat' }}
                       onClick={async () => {
                           setOid(undefined);    setUseuName(undefined);    setUseu(undefined);
                           setIspu(undefined);   setDepId(undefined);    setCert(undefined);
                           setSno(undefined);    setRcod(undefined);    setFno(undefined);
                           setPlat(undefined);   setVlgName(undefined);
                           setAddress(undefined);   setPlno(undefined);
                       } }
                />
                <ButtonRefComp intent="primary"
                      ref={commitBlurRef}  onPointerOver={(e :any) => { // @ts-ignore
                                commitBlurRef!.current!.focus(); }}
                        onPress={() => {
                            setOpen(false);
                            //【第三代方案】直接把修改完的过滤器参数回填给本地sessionStorage存储。不用上下级组件层层传递。
                            sessionStorage['设备过滤'] =JSON.stringify({oid,useuName,useu,ispu, ispud:{id:depId},
                                cert,sno,rcod,fno,plat,vlgName,address,plno
                            });
                            history.push("/device", {time: Date(), save,field,reurl,p1field,multi} );    //强制刷新！，时间肯定变化。
                            //过滤器改完重查还需要确保伪对话框逻辑可返回！
                            console.log(`路由历史state刚刚设置后:`, history);
                        } }
                >
                 过滤器改完重查
                </ButtonRefComp>
            </div>

          </div>
            </form>
        </div>
                </DialogDescription>
                <DialogClose>关闭</DialogClose>
            </DialogContent>
      </Dialog>
    </React.Fragment>
  );
};


/*图标触发：
<IconButton  component={Link}  to="/device/option"
<form 底下做的清空按钮这样：
提交后URL是action+=?user=&gender=2&favor=1&favor=2&skill=1&skill=2
 <form  method="get"  action="/"   css={{ margin: 0,  position: "relative" }}>
  <Input role='button'  type='reset'  value={'清空过滤'}
     onClick={async () => {
         //上面Input添加了defaultValue={""}之后，就不能显示上一次取值了，若改了再做清空还会保留上一次输入。完美方案=依旧需要前值保留的就只能人工setXXX方式
         //上若采用<CommitInput defaultValue={''}有缺点：经过路由器退出再进入页面的是无法做到所见即所设的显示参数，感觉歧义，路由参数和过滤器编辑框内容无法一致性。还是要人工清除！
         setFno(undefined);
     }}   />
*/
